<template>
  <div style="display: inline-block;" id="parameter">
    <slot v-bind:on="toggle">
      <el-button v-bind="$attrs" @click.stop="toggle" v-on="$listeners">{{btnText}}</el-button>
    </slot>
    <el-dialog :title="title" append-to-body :close-on-click-modal="false" :visible.sync="show" 
      class="dialog_index dialog_image parameter" :before-close="cancle">
      <el-form v-loading="loading" label-position="right" :model="formList" ref="formList">
        <el-tabs type="card" v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane :label="item.site" :name="item.site" v-for="(item, pindex) in formList" :key="item.id" style="overflow-y: auto;height: 64vh;overflow-x: hidden;">
            <template v-if="!showDetail">
              <template v-for="(val, index) in item.data">
                <List 
                  :key="val"
                  :pindex="pindex"
                  :index="index" 
                  :item="val" 
                  :data="item.data" 
                  @add-item="handleAddItem" 
                  @remove-item="handleRemoveItem" 
                  @move="handleMoveItem" 
                  @update="handleChangeItem"
                  @add-item-content="handleAddItemContent"
                  @remove-item-content="handleRemoveItemContent"/>
              </template>
            </template>
            <template v-else>
              <template v-for="(val) in item.data">
                <Detail 
                  :key="val"
                  :item="val" 
                />
              </template>
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!showDetail" type="search" @click="submit" :loading="saveLoading">保存</el-button>
        <el-button @click="cancle">{{ showDetail ? '关闭' : '取消' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as productBasicApi from '@/api/product/productBasic.js'
import List from './components/list'
import Detail from './components/detail'
export default {
  components: {
    List,
    Detail
  },
  data () {
    return {
      id: void 0,
      show: false,
      loading: false,
      saveLoading: false,
      index: 0,
      activeName: "US",

      formList: []
    }
  },
  props: {
    btnText: {
      type: String,
      default() {
        return '编辑'
      }
    },
    title: {
      type: String,
      default: '编辑参数'
    },
    detail: {
      type: [String, Boolean],
      default() {
        return false
      }
    }
  },
  computed: {
    showDetail() {
      if(this.detail === '' && this.detail !== undefined) {
        return true
      }
      return this.detail
    }
  },
  methods: {
    handleAddItem() {
      this.formList.forEach(item => {
        return {
          ...item,
          data: item.data.push([
            {
              product_id: this.id,
              site_id: item.id,
              site: item.site,
              first_title: '',
              second_title: '',
              document: '',
              image: ''
            }
          ])
        }
      })
    },
    handleAddItemContent(indexs) {
      this.formList.forEach((item) => {
        item.data.forEach((val, index) => {
          if(index === indexs[0]) {
            val.push({
              product_id: this.id,
              site_id: item.id,
              site: item.site,
              first_title: item.data[0].first_title,
              second_title: '',
              document: '',
              image: ''
            })
          }
        })
      })
    },
    handleRemoveItem(index) {
      this.formList.forEach(item => {
        item.data.splice(index, 1)
      })
    },
    handleRemoveItemContent(indexs) {
      this.formList.forEach(item => {
        item.data.forEach((val, index) => {
          if(index === indexs[0]) {
            val.splice(indexs[1], 1)
          }
        })
      })
    },
    handleMoveItem(position) {
      this.formList = this.formList.map((item) => {
        [item.data[position[0]], item.data[position[1]]] = [item.data[position[1]], item.data[position[0]]]
        return item
      })
    },
    handleChangeItem(data) {
      if(data.data.image !== undefined) {
        this.formList.forEach(item => {
          item.data[data.index][data.subIndex].image = data.data.image
        })
      } else {
        this.formList[this.index].data.forEach((item, index) => {
          if(index === data.index) {
            item.forEach((val, i) => {
              if(data.subIndex === 'all') {
                Object.assign(val, data.data)
              } else if(i === data.subIndex) {
                Object.assign(val, data.data)
              }
            })
          }
        })
      }
    },
    getProductSpec () {
      this.loading = true
      let params = {
        product_id: this.id
      }
      productBasicApi.getProductParameter(params).then(res=>{
        this.formList = res.data
        if(this.formList.every(item => {
          return !item.data.length
        })) {
          this.handleAddItem()
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleTabClick(e) {
      this.index = e.index
    },
    toggle(id) {
      this.show = !this.show
      if(this.show){
        /\d+$/.test(id) && (this.id = id)
        // this.loading = true
        if(this.id) {
          this.getProductSpec()
        }
      }
    },
    cancle(){
      // this.$refs.bannerForm.resetFields(); // 清空原来的数据
      this.toggle()
    },
    submit() {
      // for(let i = 0; i < this.formList.length; i++) {
      //   for(let j = 0; j < this.formList[i].data.length; j++) {
      //     for(let z = 0; z < this.formList[i].data[j].length; z++) {
      //       if(!this.formList[i].data[j][0].first_title) {
      //         this.$message.error('站点' + this.formList[i].site + '参数' +(j+1) +'下一级标题为必填项')
      //         return
      //       }
      //       if(!this.formList[i].data[j][z].document) {
      //         this.$message.error('站点' + this.formList[i].site + '参数' +(j+1) +`下第${z+1}个参数内容为必填项`)
      //         return
      //       }
      //     }
      //   }
      // }
      this.formList.forEach(item => {
        item.data.forEach(val => {
          val.forEach(v => {
            if(!v.first_title) {
              v.first_title = val[0].first_title
            }
          })
        })
      })
      this.$refs.formList.validate((valid) => {
        if(valid) {
          let params = {
              data: JSON.stringify(this.formList),
              product_id: this.id
            }
          this.saveLoading = true
          productBasicApi.postProductParameter(params).then((res) => {
            if(res.state == 1){
                this.$message.success('保存成功')   
                this.cancle()
              }
          }).finally(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.parameter .el-dialog .el-dialog__body {
  overflow: hidden;
  padding: 24px 0;
}
.parameter .el-tabs--card .el-tabs__header {
  padding: 0 24px;
  border-bottom: 0;
}
.parameter .el-tabs__nav-wrap {
  border-bottom: 1px solid #E4E7ED;
}
</style>